<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Type YH trangle</title>
    <style type="text/css">
        div#container{
            width:300px;
            margin: 0 auto;
            display:flex;
            justify-content:center;
            background-color: bisque;
            font-family: Calibri;
        }
        div#container2{
            background-color: bisque;
            font-family: Calibri;
        }
        input#input{
            width: 150px;
            border-radius: 2px;
            background-color: yellow;
        }
        button#post{
            border-radius: 2px;
            background-color: powderblue;
        }
    </style>
</head>
<body>
<div id="container">
    <div>
        <input type="text" placeholder="input power of number" id="input"/>
        <button id="post">Type</button>
    </div>
</div>

<script type="text/javascript">
    var input=document.getElementById("input");
    var submit=document.getElementById("post");
    var type=function(){
        for(var i=0;i<arguments.length;i++){
            document.write(" "+arguments[i]);
        }
    }

    submit.onclick=function(){
        var get=input.value;
        var power=parseInt(get);

        if(!power){
            alert("You input "+get+" has error! Please input an int.")
        }else{
            var val;
            type(1+"<br/>");
            for(var i=0;i<get;i++){
                val=1;
                type(val);
                for(var j=0;j<=i;j++){
                    val=val*(i+1-j)/(j+1);
                    type(val);
                }
                type("<br/>");
            }
            var container = document.getElementById("container");
            container.innerHTML+=type;
        }
    }
</script>
</body>
</html>